// 路由基本使用
import React from 'react'
import ReactDOM from 'react-dom'
import catPath from './imgs/cat.png'

// 跟踪鼠标的移动坐标
class MouseTracker extends React.Component {
  state = {
    x: 0,
    y: 0,
  }
  handleMove = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    })
  }
  render() {
    const { x, y } = this.state
    return (
      <div
        onMouseMove={this.handleMove}
        style={{ width: '300px', height: '300px', border: '1px solid pink' }}
      >
        鼠标的位置：{'(' + x + ',' + y + ')'}
      </div>
    )
  }
}

// 猫抓老师
class TomCat extends React.Component {
  state = {
    x: 0,
    y: 0,
  }
  handleMove = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    })
  }
  render() {
    const { x, y } = this.state
    return (
      <div
        onMouseMove={this.handleMove}
        style={{ width: '300px', height: '300px', border: '1px solid pink' }}
      >
        鼠标的位置：{'(' + x + ',' + y + ')'}
        <img
          style={{ position: 'absolute', left: x, top: y }}
          src={catPath}
          alt=""
        />
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <div>React进阶</div>
        {/* <MouseTracker /> */}
        <TomCat />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
